<template>
  <div style="width:1200px;margin:0 auto;">
    <el-row style="margin: 18px 0px 0px 18px ">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >管理中心</el-breadcrumb-item>
        <el-breadcrumb-item >内容管理</el-breadcrumb-item>
        <el-breadcrumb-item >问题管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑器</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-input
        v-model="question.title"
        style="margin: 10px 0px;font-size: 18px; width:900px;float:left;"
        placeholder="请输入问题标题"></el-input>

    <el-select v-model="id" clearable placeholder="请选择" style="margin: 10px 0px;font-size: 18px;width:200px; float:right;">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.categoryName"
      :value="item.id">
    </el-option>
  </el-select>
    </el-row>
    <el-row style="height: calc(100vh - 140px);">
      <mavon-editor
        v-model="question.content"
        style="height: 100%;"
        ref=md
        @save="saveQuestion"
        fontSize="16px">
      </mavon-editor>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: 'EditorQuestion',
    data () {
      return {
        question: {},
        dialogVisible: false,
        options: [],
        id: ''
      }
    },
    mounted () {
      if (this.$route.params.blogs) {
        this.question = this.$route.params.blogs
      }
      this.loadQuestionCategory()
    },
    methods: {
      saveQuestion () {
        // value 是 md，render 是 html
        this.$confirm('是否保存并发布问题?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$axios
              .post('/question/issueQuestion', {
                id: this.question.id,
                cid: this.id,
                title: this.question.title,
                content: this.question.content
              }).then(resp => {
              if (resp && resp.data.code === 200) {
                this.$message({
                  type: 'info',
                  message: '已保存成功'
                })
              }
            })
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
      },
      loadQuestionCategory(){
        var _this = this;
        this.$axios.get('/question/questionCategory',{})
        .then(resp=>{
          _this.options = resp.data.data
        })

      }
    }
  }
</script>
